<template>
    <div>
      <!-- 作业:做一个计算器组件 -->
      <div style="width: 400px; height: 100px">
        <!-- 修改为双大括号 -->
        <h1>{{ num1 + num2 }}</h1>
      </div>
      <!-- 修改点击事件处理逻辑 -->
      <button @click="toggleFlag1">1</button>
      <button @click="toggleFlag2">2</button>
      <button @click="updateNum2">2</button>
    </div>
  </template>
  <script setup>
  import { ref } from "vue";
  const num1 = ref(0);
  const num2 = ref(0);
  const flag1 = ref(false);
  const flag2 = ref(false);
  
  // 定义切换 flag1 并更新 num1 的函数
  const toggleFlag1 = () => {
    flag1.value = !flag1.value;
    if (flag1.value) {
      num1.value = 1;
    } else {
      num1.value = 0;
    }
  };
  const toggleFlag2 = () => {
    flag2.value = !flag2.value;
    if (flag2.value) {
      num2.value = 2;
    } else {
      num2.value = 0;
    }
  };
  
  // 定义更新 num2 的函数
  const updateNum2 = () => {
    num2.value = 2;
  };
  </script>
  